<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG动画案例</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="app">
        <div id="countdown">
            <svg width="120" height="120">
				<circle
				fill="transparent"
				:stroke-width="stroke"
				stroke="#270b58"
				:r="radius"
				:cx="circleOffset"
				:cy="circleOffset"
				></circle>
				<circle
				class="circle"
				fill="transparent"
				:stroke-width="stroke"
				stroke="#f36f21"
				:r="radius"
				:cx="circleOffset"
				:cy="circleOffset"
				:stroke-dasharray="circumference"
				:stroke-dashoffset="progress"
				stroke-linecap="round"
				></circle>
			</svg>
            <span>{{countdown}}</span>
        </div>
        <button @click="animate">Animate!</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                size: 120,
                stroke: 10,
                percentage: 100,
                timer: null,
                seconds: 5
            },
            methods: {
                animate() {
                    this.timer = setInterval(() => {
                        this.percentage -= 1 / 10;
                        if (this.percentage <= 0) {
                            clearInterval(this.timer);
                            this.percentage = 100;
                        }
                    }, this.seconds * 1000 / 100 / 10);
                }
            },
            computed: {
                radius() {
                    return (this.size / 2) - (this.stroke / 2);
                },
                circleOffset() {
                    return this.size / 2;
                },
                circumference() {
                    return this.radius * 2 * Math.PI;
                },
                progress() {
                    return this.circumference - this.circumference * this.percentage / 100
                },
                countdown() {
                    return Math.ceil(this.seconds * this.percentage / 100)
                }
            }
        });
    </script>
</body>

</html>